<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
.modal{
    cursor: url(https://www.xcsharp.top/read/mycur.cur),auto;
    position: relative;
    height: 800px;
    background: rgba(105,105,105,0);
}
.footer{
    position: absolute;
    right: 0;
    bottom: 20px;
}
#status{
    cursor: url(https://www.xcsharp.top/read/mycur.cur),auto;
}
#aa{
    font-size: 1.2em;
    cursor: url(https://www.xcsharp.top/read/mycur.cur),auto;
    color: white;
    background: #000;
    padding: 10px 20px;
    border-radius: 5px;
}
#bb{
    font-size: 1.2em;
    cursor: url(https://www.xcsharp.top/read/mycur.cur),auto;
    color: white;
    background: deepskyblue;
    padding: 10px 20px;
    border-radius: 5px;
}
.modal-dialog{
    display: none;
    position: absolute;
    width:500px;
    height: 200px;
    border-radius: 5px;
    background: whitesmoke;
    top: 40px;
    left: 50%;
    margin-left: -250px;
    padding: 10px;
    transition: all 0.5s;
}
</style>
<body>
<div class="modal">
    <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eaque ex nobis temporibus tenetur? Atque aut
        culpa excepturi iure laborum nam reiciendis repudiandae veniam vero voluptatibus. Architecto commodi pariatur
        voluptate!
    Animi aut deleniti facere, harum iusto laboriosam magni quas quibusdam repellendus tempora. Accusamus aliquam
        aperiam, delectus distinctio dolorem dolores, earum id neque numquam obcaecati odit pariatur porro quas, vitae
        voluptas!<br>
    <button id="status">点击激活状态框</button>
    </div>
    <div class="modal-dialog">
         <div class="header">
             <h2>Modal title</h2>
         </div>
        <div class="content">
            Hey, You're reading this text in a modal !
        </div>
        <div class="footer">
            <button id="aa">Close</button>
            <button id="bb">Save changes</button>
        </div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function () {
    $("#status").click(function () {
       $(".modal-dialog").fadeIn(500).animate({"top":"100px"},500);
        $("#status").prop("disabled",true);
        $(".modal").css("background","rgba(105,105,105,0.5)").css("transition","1s");
    })
    $("#aa").click(function () {
        $(".modal-dialog").animate({"top":"40px"},500).fadeOut(500);
        $("#status").prop("disabled",false);
        $(".modal").css("background","rgba(105,105,105,0)").css("transition","1s");
    })
})
</script>
</body>
</html>